<script setup>
import { ref, onMounted } from 'vue'
import { ElCard, ElAvatar, ElDescriptions, ElDescriptionsItem, ElButton, ElTabPane, ElTabs, ElIcon, ElRow, ElCol, ElInput, ElForm, ElFormItem, ElMessage, ElMessageBox } from 'element-plus'
import {
  User,
  Message,
  Location,
  ArrowRight,
  ShoppingCart,
  Van,
  ChatDotRound,
  RefreshRight,
  List,
  Clock,
  Star,
  Shop,
  Goods,
  Wallet,
  QuestionFilled
} from '@element-plus/icons-vue'
import CommonHeader from '@/components/CommonHeader.vue'
import FloatingSidebar from '@/components/FloatingSidebar.vue'
import CommonFooter from '@/components/CommonFooter.vue'
import { userInfoService } from '@/api/user.js'
import { orderListByTypeService, orderListRecentService } from '@/api/order.js'
import useUserInfoStore from '@/stores/userInfo'
import { useRouter } from 'vue-router'
import { getHomeProductService } from '@/api/product.js'

const activeTab = ref('profile')
const userInfoStore = useUserInfoStore()
const router = useRouter()

// 模拟订单数据
const orders = ref()
const recentOrders = ref()

// 模拟优惠券数据
const coupons = ref([
  { id: 'C001', name: '满2000减100', value: 100, min: 2000, expiry: '2024-12-31' },
  { id: 'C002', name: '全场9折', value: '9折', min: 0, expiry: '2024-11-30' }
])

// 支付类型和订单状态映射
const paymentTypeText = (type) => {
  switch (type) {
    case 1: return '支付宝';
    case 2: return '微信';
    case 3: return '扣减余额';
    default: return '未知';
  }
}
const orderStatusText = (status) => {
  switch (status) {
    case 1: return '未付款';
    case 2: return '已付款,未发货';
    case 3: return '已发货,未签收';
    case 4: return '确认收货，交易成功';
    case 5: return '交易取消，订单关闭';
    case 6: return '交易结束，已评价';
    default: return '未知';
  }
}

// 订单状态颜色映射
const orderStatusColor = (status) => {
  switch (status) {
    case 1: return '#f56c6c'; // 红色 未付款
    case 2: return '#e6a23c'; // 橙色 已付款,未发货
    case 3: return '#409eff'; // 蓝色 已发货,未确认
    case 4: return '#67c23a'; // 绿色 交易成功
    case 5: return '#909399'; // 灰色 订单关闭
    case 6: return '#909399'; // 灰色 已评价
    default: return '#909399';
  }
}
// 获取最近完成的订单
const getRecentOrder = async () => {
  let result = await orderListRecentService();
  recentOrders.value = result.data;
}

// 抽奖
const openLuckyDraw = () => {
  ElMessage.success('恭喜你，抽中了红包！');
}

// PLUS会员开通提示
const openPlus = () => {
  ElMessage.info('还没有写……');
}

// 模拟问答数据
const questions = [
  {
    id: 1,
    user: 'j***h',
    content: '25款7000p有用吗，是否克',
    img: 'https://picsum.photos/50/50?random=5',
    answers: 0,
    time: '1小时前'
  }
]

// 跳转到订单列表
const goOrderList = (type) => {
  router.push({ path: '/home/order/list', query: { type } })
}

// 跳转到浏览历史
const goToHistory = () => {
  router.push('/home/history')
}

// 跳转到收藏页面
const goToFavorites = () => {
  router.push('/home/favorites')
}

// 店铺关注功能提示
const showShopFollowMessage = () => {
  ElMessageBox.alert(
    '该功能目前尚在开发阶段，尚未完成全部的构建与优化工作。我们正在对其进行深入的设计与调试，以确保其能够稳定、高效地运行。在正式发布之前，还需要经过多轮测试和不断完善，以达到最佳的用户体验。敬请期待后续进展。',
    '提示',
    {
      confirmButtonText: '我知道了',
      type: 'info',
      showClose: false
    }
  )
}

// 常购商品点击提示
const showFrequentItemMessage = () => {
  ElMessageBox.alert(
    '该功能目前尚在开发阶段，尚未完成全部的构建与优化工作。我们正在对其进行深入的设计与调试，以确保其能够稳定、高效地运行。在正式发布之前，还需要经过多轮测试和不断完善，以达到最佳的用户体验。敬请期待后续进展。',
    '提示',
    {
      confirmButtonText: '我知道了',
      type: 'info',
      showClose: false
    }
  )
}

// 猜你喜欢商品
const mightLikeProducts = ref([])
const getMightLikeProducts = async () => {
  const type = 0
  const isHome = true
  let result = await getHomeProductService(type, isHome)
  let data = result.data || []
  // 随机打乱并取4个
  const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]]
    }
    return array
  }
  mightLikeProducts.value = shuffleArray([...data]).slice(0, 4)
}

const openProduct = (id) => {
  window.open(`/home/product/${id}`, '_blank');
}

onMounted(async () => {
  getRecentOrder();
  getMightLikeProducts();
})

</script>

<template>
  <!-- 导航栏 -->
  <CommonHeader />
  <!-- 侧边栏 -->
  <FloatingSidebar />
  <div class="user-page">
    <div class="container">
      <el-card class="profile-wallet-card">
        <div class="profile-and-wallet">
          <div class="user-profile-section">
            <div class="user-header-main" style="display: flex; align-items: center;">
              <div style="flex-shrink:0; display:flex; align-items:center; height:100%;">
                <el-avatar :size="80" :src="userInfoStore.info.profilePicture"></el-avatar>
              </div>
              <div class="user-info" style="margin-left: 18px; min-width:0;">
                <h2>{{ userInfoStore.info.nickName }}</h2>
                <div class="user-introduction"
                  style="color: #909399; font-size: 12px; margin-top: 4px; word-break:break-all; white-space:normal; border: 1px solid #ebeef5; border-radius: 6px; padding: 4px 10px; background: #fafbfc; display: inline-block; max-width: 260px;">
                  {{ userInfoStore.info.introduction }}
                </div>
              </div>
            </div>
            <div class="plus-member-section">
              <p>开通PLUS会员尊享</p>
              <p class="privilege-text">自营7000万不限次免邮</p>
              <el-button type="warning" class="open-plus-btn" @click="openPlus">立即开通</el-button>
            </div>
          </div>

          <div class="my-wallet-section">
            <h3 style="display: flex; align-items: center; gap: 6px;"><el-icon :size="20">
                <Wallet />
              </el-icon>我的钱包</h3>
            <div class="wallet-stats">
              <div class="stat-item">
                <p class="stat-value">{{ userInfoStore.info.couponQuantity }}</p>
                <p class="stat-label">优惠券</p>
              </div>
              <div class="stat-item">
                <p class="stat-value">{{ userInfoStore.info.crystal }}</p>
                <p class="stat-label">水晶</p>
              </div>
              <div class="stat-item">
                <p class="stat-value">{{ userInfoStore.info.balance }}</p>
                <p class="stat-label">余额</p>
              </div>
              <div class="stat-item lucky-draw">
                <el-button class="lucky-draw-btn" type="danger" @click="openLuckyDraw">抽红包</el-button>
                <p class="stat-label">每日抽奖</p>
              </div>
            </div>
            <div style="margin-top: 24px;">
              <hr
                style="border: none; border-top: 2px dashed #e0e4ea; margin: 0 0 14px 0; width: 90%; margin-left: auto; margin-right: auto;" />
              <div
                style="font-weight: 600; color: #2d3a4b; font-size: 15.5px; margin-bottom: 8px; text-align: left; letter-spacing: 1px; display: flex; align-items: center; gap: 6px;">
                <el-icon :size="18" style="color:#409EFF;">
                  <User />
                </el-icon>个人信息
              </div>
              <div class="wallet-links">
                <span v-if="userInfoStore.info.email" class="user-tag"><el-icon :size="13">
                    <Message />
                  </el-icon>邮箱：{{ userInfoStore.info.email }}</span>
                <span v-if="userInfoStore.info.birthday" class="user-tag"><el-icon :size="13">
                    <Clock />
                  </el-icon>生日：{{ userInfoStore.info.birthday }}</span>
                <span v-if="userInfoStore.info.age" class="user-tag"><el-icon :size="13">
                    <Star />
                  </el-icon>年龄：{{ userInfoStore.info.age }}</span>
                <span v-if="userInfoStore.info.height" class="user-tag"><el-icon :size="13">
                    <Goods />
                  </el-icon>身高：{{ userInfoStore.info.height }}cm</span>
                <span v-if="userInfoStore.info.weight" class="user-tag"><el-icon :size="13">
                    <Shop />
                  </el-icon>体重：{{ userInfoStore.info.weight }}kg</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <div class="bottom-sections">
        <div class="main-content">
          <el-card class="orders-section-card">
            <div class="my-orders-section">
              <h3>我的订单</h3>
              <div class="order-status-icons">
                <div class="status-item" @click="goOrderList(1)">
                  <el-icon :size="24">
                    <ShoppingCart />
                  </el-icon>
                  <span>待付款</span>
                </div>
                <div class="status-item" @click="goOrderList(3)">
                  <el-icon :size="24">
                    <Van />
                  </el-icon>
                  <span>待收货</span>
                </div>
                <div class="status-item" @click="goOrderList(6)">
                  <el-icon :size="24">
                    <ChatDotRound />
                  </el-icon>
                  <span class="badge">11</span>
                  <span>待评价</span>
                </div>
                <div class="status-item" @click="goOrderList(4)">
                  <el-icon :size="24">
                    <RefreshRight />
                  </el-icon>
                  <span>退换/售后</span>
                </div>
                <div class="status-item" @click="goOrderList(0)">
                  <el-icon :size="24">
                    <List />
                  </el-icon>
                  <span>全部订单</span>
                </div>
              </div>
              <div class="order-list-preview">
                <div v-for="(products, orderId) in recentOrders" :key="orderId" class="order-group">
                  <div class="order-header">
                    <span class="order-no">订单号: {{ orderId }}</span>
                    <span class="order-date">{{ new Date().toISOString().slice(0, 10) }}</span>
                  </div>
                  <el-card v-for="product in products" :key="product.id" class="order-preview-card">
                    <div class="order-preview-content">
                      <!-- 左侧：商品缩略图 -->
                      <div class="order-left">
                        <img :src="product.image" :alt="product.name" class="order-thumb-img" />
                      </div>
                      <!-- 中间：商品描述 -->
                      <div class="order-middle">
                        <div class="order-title">{{ product.name }}</div>
                        <div class="order-desc">{{ product.description }}</div>
                      </div>
                    </div>
                    <div class="order-actions" style="display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8px;">
                      <div>
                        <el-button size="small" type="default">更多</el-button>
                      </div>
                      <div style="display: flex; gap: 12px; align-items: flex-end;">
                        <el-button size="small" type="primary">追加评价</el-button>
                        <el-button size="small" type="success">加入购物车</el-button>
                        <div style="display: flex; flex-direction: column; align-items: center;">
                          <el-button size="small" type="warning">再买一单</el-button>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </el-card>
        </div>

        <div class="right-sidebar">
          <el-card class="recent-views-section">
            <h3>足迹与收藏</h3>
            <div class="icons-row">
              <div class="icon-item" @click="goToHistory" style="cursor: pointer;">
                <el-icon :size="24">
                  <Clock />
                </el-icon>
                <span>浏览记录</span>
              </div>
              <div class="icon-item" @click="goToFavorites" style="cursor: pointer;">
                <el-icon :size="24">
                  <Star />
                </el-icon>
                <span>商品收藏</span>
              </div>
              <div class="icon-item" @click="showShopFollowMessage" style="cursor: pointer;">
                <el-icon :size="24">
                  <Shop />
                </el-icon>
                <span>店铺关注</span>
              </div>
            </div>
          </el-card>

          <el-card class="frequent-purchases-section">
            <h3>常购清单</h3>
            <div class="frequent-items-scroll">
              <div class="frequent-item" v-for="i in 4" :key="i">
                <img src="@/assets/images/eat.jpg" alt="frequent item" 
                     @click="showFrequentItemMessage" style="cursor: pointer;" />
                <p @click="showFrequentItemMessage" style="cursor: pointer;">被吃掉了</p>
              </div>
            </div>
          </el-card>

          <el-card class="guess-you-like-section">
            <h3>猜你喜欢</h3>
            <div class="frequent-items-scroll">
              <div class="frequent-item" v-for="product in mightLikeProducts" :key="product.id">
                <img :src="product.image" alt="guess like item"
                     @click.stop="openProduct(product.id)" style="cursor:pointer;" />
                <p :title="product.name || product.title"
                   @click.stop="openProduct(product.id)" style="cursor:pointer;">
                  {{ product.name || product.title }}
                </p>
              </div>
            </div>
          </el-card>

          <el-card class="my-questions-section">
            <h3>我的问答 <el-button link type="primary" class="more-link">更多 <el-icon>
                  <ArrowRight />
                </el-icon></el-button></h3>
            <div class="question-item" v-for="q in questions" :key="q.id">
              <p class="question-text">{{ q.user }} 向您提问 <span style="color:#bbb;font-size:12px;">{{ q.time }}</span></p>
              <div class="question-content">
                <span class="question-tag">
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </span>
                <p>{{ q.content }}</p>
                <img :src="q.img" alt="question product" />
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
  <!-- 页脚 -->
  <CommonFooter />
</template>

<style scoped>
.user-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
  display: flex;
  justify-content: center;
}

.container {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Changed to column for top card then rows below */
  gap: 20px;
}

.bottom-sections {
  display: flex;
  gap: 20px;
  align-items: stretch; /* 让左右两侧等高 */
}

.main-content {
  flex: 4;
  /* 让主内容区更宽 */
  min-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-wallet-card,
.orders-section-card,
.recent-views-section,
.frequent-purchases-section,
.my-questions-section {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  /* Add padding to match image */
}

.profile-and-wallet {
  display: flex;
  /* Removed margin-bottom here, as the gap on .container now handles spacing */
  width: 100%;
  /* Ensure this section takes full width of its parent card */
}

.user-profile-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 20px;
  border-right: 1px dashed #ebeef5;
}

.user-header-main {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-info {
  margin-left: 15px;
}

.user-info h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.member-level {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  font-size: 12px;
}

.silver-member {
  background-color: #e0e0e0;
  padding: 2px 8px;
  border-radius: 12px;
  color: #606266;
}

.xiaobai-score {
  color: #909399;
}

.plus-member-section {
  text-align: center;
  background-color: #e63946;
  /* JD Red */
  color: white;
  padding: 6px 8px;
  border-radius: 8px;
  margin-top: 10px;
  width: 100%;
}

.plus-member-section p {
  margin: 2px 0;
  font-size: 13px;
}

.privilege-text {
  font-size: 11px;
  opacity: 0.8;
}

.open-plus-btn {
  margin-top: 10px;
  background-color: #f7b500;
  /* Gold color */
  border-color: #f7b500;
  color: white;
  font-weight: bold;
}

.my-wallet-section {
  flex: 2;
  padding-left: 20px;
}

.my-wallet-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  color: #303133;
}

.wallet-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-bottom: 12px;
  background: #f8fafc;
  border-radius: 10px;
  padding: 2px 0 2px 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  transition: box-shadow 0.2s, background 0.2s;
  border-radius: 8px;
  cursor: pointer;
  padding: 2px 0;
}

.stat-item:hover {
  background: #f0f6ff;
  box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.08);
}

.stat-value {
  font-size: 22px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.stat-label {
  font-size: 13px;
  color: #7a8ca4;
  margin-top: 2px;
}

.repayment-link {
  font-size: 12px;
  margin-top: 5px;
}

.wallet-links {
  text-align: left;
  font-size: 13px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  min-height: 32px;
}

.user-tag {
  display: inline-flex;
  align-items: center;
  background: #f5f7fa;
  color: #4a5a6a;
  border-radius: 8px;
  font-size: 12px;
  padding: 3px 10px 3px 7px;
  line-height: 1.6;
  border: 1px solid #e3e7ee;
  margin-bottom: 4px;
  margin-right: 8px;
  letter-spacing: 0.3px;
  font-family: inherit;
  box-shadow: none;
  transition: none;
  cursor: default;
}

.user-tag .el-icon {
  margin-right: 2px;
  color: #a0b4c8;
  transition: none;
}

.my-orders-section {
  padding: 0;
  /* Remove default padding as it's handled by card */
}

.my-orders-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  color: #303133;
}

.order-status-icons {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-bottom: 20px;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.status-item .el-icon {
  margin-bottom: 8px;
  color: #409EFF;
}

.status-item span {
  font-size: 13px;
  color: #606266;
}

.status-item .badge {
  position: absolute;
  top: -5px;
  right: 15px;
  background-color: #e63946;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 10px;
  min-width: 12px;
  text-align: center;
}

.order-list-preview {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.order-group {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.order-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #909399;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.order-preview-card {
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow 0.2s;
  border: 1px solid #f0f0f0;
  background: #fff;
  margin-bottom: 10px;
}

.order-preview-card:last-child {
  margin-bottom: 0;
}

.order-preview-content {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0 12px 0;
  justify-content: space-between;
}

.order-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 120px;
  gap: 8px;
}

.order-thumb-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  background: #fafbfc;
}

.order-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  margin-left: -30px;
  background: #f5f6fa;
  border-radius: 8px;
  padding: 12px 16px;
  justify-content: center;
}

.order-title {
  font-weight: bold;
  font-size: 16px;
  color: #303133;
}

.order-desc {
  font-size: 13px;
  color: #606266;
}

.order-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 80px;
}

.order-right span {
  color: #f56c6c;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 2px;
}

.order-qty {
  font-size: 13px;
  color: #909399;
}

.order-amount {
  font-weight: bold;
  font-size: 16px;
  color: #5a5aee;
}

.order-amount-value {
  color: #f56c6c;
  font-size: 18px;
}

.order-pay-status {
  display: flex;
  gap: 8px;
  align-items: center;
}

.order-status-tag {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.view-details-btn {
  font-size: 13px;
}

.view-invoice-btn {
  font-size: 13px;
  margin-left: 10px;
}

.right-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: stretch; /* 让右侧自动等高 */
}

.recent-views-section,
.frequent-purchases-section,
.my-questions-section {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* Ensure these also have shadows */
  border-radius: 8px;
  padding: 20px;
}

.recent-views-section h3,
.frequent-purchases-section h3,
.my-questions-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  color: #303133;
}

.icons-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.icon-item:hover {
  transform: translateY(-2px);
  color: #409EFF;
}

.icon-item .el-icon {
  margin-bottom: 8px;
  color: #409EFF;
  transition: all 0.3s ease;
}

.icon-item:hover .el-icon {
  transform: scale(1.1);
}

.icon-item span {
  font-size: 12px;
  color: #606266;
  transition: color 0.3s ease;
}

.icon-item:hover span {
  color: #409EFF;
}

.frequent-items-scroll {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 10px;
  scrollbar-width: thin;
  /* For Firefox */
  scrollbar-color: #d1d1d1 #f5f5f5;
  /* For Firefox */
}

.frequent-items-scroll::-webkit-scrollbar {
  height: 8px;
}

.frequent-items-scroll::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

.frequent-items-scroll::-webkit-scrollbar-thumb {
  background: #d1d1d1;
  border-radius: 10px;
}

.frequent-item {
  flex-shrink: 0;
  text-align: center;
}

.frequent-item img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 7px;
  margin-bottom: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  background: #fafbfc;
}

.frequent-item p {
  font-size: 13px;
  color: #303133;
  margin: 0;
  width: 72px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

.my-questions-section .more-link {
  float: right;
  font-size: 14px;
}

.question-item {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: white;
}

.question-text {
  font-size: 13px;
  color: #909399;
  margin-bottom: 10px;
}

.question-content {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.question-tag {
  display: inline-block;
  background: linear-gradient(90deg, #f8fafc 60%, #eaf3fa 100%);
  color: #5a6d85;
  border-radius: 14px;
  font-size: 12px;
  padding: 2.5px 12px;
  line-height: 1.5;
  border: 1px solid #e3e7ee;
  margin-bottom: 3px;
  margin-right: 6px;
  letter-spacing: 0.3px;
  font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans', Arial, sans-serif;
  box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.04);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  cursor: default;
}

.order-thumb-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  background: #fafbfc;
}

.my-questions-section {
  min-height: 0;
  padding: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.recent-views-section {
  min-height: 0;
  padding: 6px;
}

.frequent-purchases-section {
  min-height: 0;
  padding: 4px;
}

.guess-you-like-section {
  min-height: 0;
  padding: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 0;
}
</style>
